<template>
  <view class="pageBg">

    <view class="pd262830 box-b pdb120 box-b">

      <view v-if="orderList && orderList.length > 0">
        <view v-for="(item, index) in orderList" :key="index" class="bgff radius12 pd050 box-b mgb22">

          <view class="pdb36 pdt50 box-b bdbd9">
            <view class="betweenBox">
              <view class="flex-align lh36 fs36">
                <view class="fw500 mgr52 fs36 color1a">
                  {{ item.consignee }}
                </view>
                <view class="fs36 color4d">
                  {{ item.mobile }}
                </view>
              </view>
              <view class="jsend">
                <c-botton
                  v-if="item.isDefault==1"
                  name="默认地址"
                  class-name="btn-close radius23 pd018 flex-box fs24 minh46 lh26 tac ffmi mgl16 bdff0 sub-color">
                </c-botton>
              </view>
            </view>
            <view class="lh32 fs24 zhedie mgt24">
              {{ item.zone }}{{ item.address }}
            </view>
          </view>

          <view class="flex-box pdt34 pdb28 box-b">
            <view class="flex1">
              <c-botton
                name="删 除"
                class-name="btn-close radius23 pd034 flex-box fs24 minh46 lh26 tac ffmi mgl16 bdff0 sub-color"
                @click="delAddress(item.id)">
              </c-botton>
            </view>
            <view class="flex1 mgl22 mgr22">
              <c-botton
                name="编 辑"
                class-name="btn-close radius23 pd034 flex-box fs24 minh46 lh26 tac ffmi mgl16 bd009 theme-color"
                @click="goEdit(item.id)">
              </c-botton>
            </view>
            <view class="flex1">
              <c-botton
                v-if="item.isDefault!=1"
                name="设为默认"
                class-name="btn-close radius23 pd034 flex-box fs24 minh46 lh26 tac ffmi mgl16 bdff0 sub-color"
                @click="setDefault(index)">
              </c-botton>
            </view>

          </view>
        </view>
      </view>

      <no-data
        v-if="showOrder"
        classStyle="width:213rpx;height:182rpx;margin: 225rpx auto 53rpx;"
        titleColor="#808080"
        nullName="noData.png"
      >
      </no-data>

    </view>

    <repair-status
      btnName="添加地址"
      @toOrder="toAddAddress()">
    </repair-status>

  </view>
</template>

<script>
import { mapState } from 'vuex';
import repairStatus from '@/pages/member/components/repair-status';

export default {
  components: {
    repairStatus,
  },
  data() {
    return {
      orderList: [],
      isChoose: 0,
      showOrder: false,
    };
  },
  onLoad(e) {
    if (e.isChoose) this.isChoose = e.isChoose;
  },
  onShow() {
    this.getAddressList();
  },
  onPullDownRefresh() {
    this.getAddressList().then(() => {
      uni.stopPullDownRefresh();
    });
  },
  computed: mapState(['memberInfo', 'activeAddress']),
  methods: {
    useAddress(address) {
      //save address
      if (!this.isChoose) return;
      if (this.isChoose == 1) uni.setStorageSync('activeAddress', address);
      if (this.isChoose == 2) uni.setStorageSync('activeAddress2', address);
      this.$store.commit('saveAddress', address);
      uni.navigateBack();
    },
    getAddressList() {
      const vm = this;

      // 虚拟数据 start
      vm.orderList = [
        {
          consignee: '阿水',
          mobile: '18378395882',
          zone: '广东省广州市天河区',
          address: '1号',
          isDefault: 1,
          id: 1,
        },
        {
          consignee: '阿水',
          mobile: '18378395882',
          zone: '广东省广州市天河区',
          address: '1号',
          isDefault: 0,
          id: 2,
        },
      ].map((item)=>{
        return {
          ...item,
          mobile: vm.maskPhoneNumber(item.mobile)
        }
      });
      return new Promise(function (resolve) {resolve()});
      // 虚拟数据 end

      uni.showLoading({
        title: '加载中...',
      });
      return new Promise(function (resolve) {
        this.apiUrl
          .getAddressList({
            data: {
              memberId: vm.memberInfo.id,
            },
          })
          .then((res) => {
            const { code, data } = res.data
            if (code == 0) vm.orderList = data.map((item)=>{
              return {
                ...item,
                mobile: vm.maskPhoneNumber(item.mobile)
              }
            });
          })
          .finally(() => {
            uni.hideLoading();
            if (vm.orderList && vm.orderList.length > 0) {
              vm.showOrder = false;
            } else {
              vm.showOrder = true;
            }
            resolve();
          });
      });
    },
    goEdit(id) {
      this.toPage('/pages/addressManage/editAddress/editAddress?id=' + id, true)
    },
    setDefault(index) {
      let arr = this.orderList;
      if (!arr[index].isDefault) {
        uni.showLoading({
          title: '加载中...',
        });
        this.apiUrl
          .submitAddress({
            data: {
              id: arr[index].id,
              isDefault: 1,
              address: arr[index].address,
              city: arr[index].city,
              consignee: arr[index].consignee,
              district: arr[index].district,
              mobile: arr[index].mobile,
              position: arr[index].position,
              province: arr[index].province,
            },
          })
          .then((res) => {
            uni.hideLoading();
            if (res.data.code == 0) {
              arr.forEach((item) => (item.isDefault = 0));
              arr[index].isDefault = 1;
              this.orderList = arr;
            }
          })
      }
    },
    delAddress(id) {
      uni.showModal({
        title: '提示',
        content: '确定删除该地址吗',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '加载中...',
            });

            this.apiUrl
              .delAddressById({
                data: {
                  id,
                },
              })
              .then((res) => {
                uni.hideLoading();
                if (res.data.code == 0) {
                  if ((this.activeAddress || {}).id == id) {
                    this.$store.commit('delAddress');
                  }
                  uni.showToast({
                    title: '删除成功',
                    duration: 2000,
                  });
                  this.orderList = this.orderList.filter((item) => item.id != id);
                }
              });

          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
    },
    toAddAddress() {
      let query = '';
      if (!this.orderList.length) query = '?mustDefault=1';
      this.toPage(`/pages/addressManage/editAddress/editAddress${query}`);
    },
  },
};
</script>

<style lang="less" scoped>
.radio-icon {
  width: 38rpx;
  height: 38rpx;
  display: block;
}

.edit-icon,
.del-icon {
  width: 48rpx;
  height: 48rpx;
  display: block;
}

.list-item {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 50rpx 30rpx 0;
  margin-bottom: 30rpx;

  .base {
    margin-bottom: 16rpx;
    padding: 0 10rpx;

    text {
      color: #000000;
      font-size: 34rpx;
      padding-right: 30rpx;
    }
  }

  .addr {
    color: #656565;
    font-size: 28rpx;
    line-height: 46rpx;
    padding: 0 10rpx 30rpx;
  }

  .handle {
    height: 100rpx;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    padding: 0 10rpx;

    .isDefault {
      flex: 1;
      display: flex;
      align-items: center;

      .txt {
        color: #656565;
        font-size: 28rpx;
        padding-left: 14rpx;
      }
    }

    .edit-icon {
      margin-right: 50rpx;
    }

    .del-icon {
      margin-right: 20rpx;
    }
  }
}

.btn-warp {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15rpx 40rpx;

  .btn {
    background: #e64e2d;
    border-radius: 10rpx;
    line-height: 90rpx;
    color: #ffffff;
    font-size: 36rpx;
    text-align: center;
  }
}
</style>
